<template>
	<view>
		<view class="tab">
			<view class="header">
				<view class="header-one">
					<view @tap="navLeft"><img src="../static/assert/tuichut.png" alt="" /></view>
					<view>交易</view>
				</view>
				<!-- 币种 -->
				<view class="header-two">
					<view>
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{ array[index] }}</view>
						</picker>
					</view>
				</view>
			</view>

			<!-- 涨跌幅 -->
			<!-- <view class="gains">
				<view class="gains-left">
					<view>7467.4</view>
					<view>
						涨跌幅
						<text class="span">-1.041%</text>
					</view>
				</view>
				<view class="gains-right">
					<view class="gains-one">
						<text>24H最高</text>
						<text>7552.17</text>
					</view>
					<view class="gains-one">
						<text>24H最低</text>
						<text>7441.0</text>
					</view>
					<view class="gains-one">
						<text>24H量</text>
						<text>47449.67</text>
					</view>
				</view>
			</view> -->
			<!-- 分时周 -->
			<view class="week">
				<view v-for="(item, index) in timeDate" @click="clickAdd(index, item.name)" :class="{ red: i === index }" :key="index">
					<text>{{ item.name }}</text>
				</view>
			</view>
			<iframe id="tradingViews" width="100%" height="800" src="../../static/contract/contract.html" frameborder="0"></iframe>
		</view>
	</view>
</template>
<script>
import { mapState,mapMutations} from 'vuex';
import $ from 'jquery';
import request from '@/utils/request';
import { toast } from '@/utils/toast'
export default {
	data() {
		return {
			getB: 'BTC/USDT',
			title: 'picker',
			array:[],
			index: 0,
			timeDate: [
				{
					name: '分时'
				},
				{
					name: '1分钟'
				},
				{
					name: '5分钟'
				},
				{
					name: '15分钟'
				},
				{
					name: '30分钟'
				},
				{
					name: '1小时'
				},
				{
					name: '日线'
				},
			],
			// 分时秒
			i: 2,
			productlist:[],
			
		};
	},
	mounted() {
		
	},
    onLoad() {
    	this.getBList()
    },
	created() {
		
		this.getBList();
		console.log(this.currency,3333)
		
		if(JSON.parse(this.currency).name!=null){ 
			this.index = JSON.parse(this.currency).id
		}else{
			this.index = 0
		}
	},
	
	computed:{
		...mapState('user',['HAND_NAME']),
		...mapState('user',['currency'])
		
	},
	methods: {
		navLeft(){
			var params = {
				name:null,
				id:null
			}
			this.$store.commit('user/currency',JSON.stringify(params))
			uni.switchTab({
				
				url:"/pages/quotation/main"
			})
		},
		// 获取币对数
		getBList() {
			request('/infos/goods/getlist', 'get', '').then(res => {
				this.productlist = res.data.GoodsItem
				this.$store.commit('user/HAND_NAME', res.data.GoodsItem[0])				
				console.log(this.productlist,222)
				res.data.GoodsItem.forEach((v,i)=>{
					this.array.push(v.name)
				})	
				console.log(this.currency,65555)
				if(JSON.parse(this.currency).name!=null){
					setTimeout(()=>{
						$("#tradingViews")[0].contentWindow.window.tvWidget.setSymbol(this.array[JSON.parse(this.currency).id],"5");
					},2000)
				}
				
			});
		},
		bindPickerChange: function(e) {
			
			
			this.index = e.target.value
			
			
			$("#tradingViews")[0].contentWindow.window.tvWidget.setSymbol(this.array[this.index],"D");
			
			 this.$store.commit('user/HAND_NAME', this.productlist[this.index])
			 // _self.$store.commit("user/LOGIN_INFO", data.data);
			 console.log(this.$store)
			
		},
		clickAdd(index, name) {
			this.i = index
			console.log(index,name)
			
		
			if(name=="分时"){
				$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setResolution('1');
				$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setChartType(3);
			}else if(name=="1分钟"){
				$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setResolution('1');
				$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setChartType(1);
			}else if(name=="5分钟"){
				$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setResolution('5');
				$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setChartType(1);
			}else if(name=="15分钟"){
				$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setResolution('15');
				$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setChartType(1);
			}else if(name=="30分钟"){
				$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setResolution('30');
				$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setChartType(1);
			}else if(name=="1小时"){
				$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setResolution('60');
				$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setChartType(1);
			}else if(name=="日线"){
				$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setResolution('D');
				$("#tradingViews")[0].contentWindow.window.tvWidget.chart().setChartType(1);
			}
		},
		
	}
};
</script>
<style lang="scss" scoped>
.header {
	display: flex;
	justify-content: space-between;
	width: 100%;
	background: #131f30;
	height: 129upx;

	.header-one {
		display: flex;
		align-items: center;
		padding: 0 20upx;

		& > view:nth-child(1) img {
			height: 32upx;
			width: 32upx;
		}

		& > view:nth-child(2) {
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(255, 255, 255, 1);
			margin-left: 10upx;
		}
	}
	.header-two {
		display: flex;
		align-items: center;
		padding: 0 20upx;
	}
	.uni-input {
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		margin-top: 10upx;
	}
	.uniIMg {
		width: 16upx;
		height: 10upx;
		margin-left: 15upx;
	}
}

/* 涨跌幅 */
.gains {
	width: 100%;
	background: #152335;
	display: flex;
	justify-content: space-between;
	/* 左边 */

	.gains-left {
		padding: 0 39upx;
		width: 55%;
		padding-top: 25px;
		padding-bottom: 15px;

		& > view:nth-child(1) {
			font-size: 43upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(195, 47, 82, 1);
		}

		& > view:nth-child(2) {
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(159, 165, 200, 1);
			padding-top: 53upx;

			& > text {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(195, 47, 82, 1);
			}
		}
	}

	/* 右边 */
	.gains-right {
		width: 45%;
		padding: 0 39upx;
		padding-bottom: 15upx;
		padding-top: 40upx;

		.gains-one {
			display: flex;
			justify-content: space-between;
			line-height: 50upx;

			& > text:nth-child(1) {
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(159, 165, 200, 1);
			}

			& > text:nth-child(2) {
				font-size: 26upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(213, 217, 239, 1);
			}
		}
	}
}
// 分时
.week {
	display: flex;
	font-size: 22upx;
	color: #ffffef;
	justify-content: space-between;
	padding: 0 40upx;
	padding-top: 30upx;
	background: #152335;
}
.red {
	display: flex;
	font-size: 21upx;
	color: #6881ff;
	border-bottom: 1upx solid #6881ff;
	padding-bottom: 20upx;
}
</style>
